<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="formData.menuName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="上级菜单" prop="parentId">
                        <el-cascader v-model="formData.parentId" :options="parentMenu"
                                     :props="{value:'id', label:'menuName', checkStrictly:true, expandTrigger:'hover', emitPath:false}"
                                     :show-all-levels="false" clearable></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="URL" prop="url">
                        <el-input v-model="formData.url"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="排序" prop="sort">
                        <el-input-number v-model="formData.sort" :min="1" :max="99" style="width:100%"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="formData.icon"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center;">
            <el-button @click="closePage">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");
    new Vue({
        el: '#app',
        data() {
			return {
                formData: {
                	id: '',
                    menuName: '',
                    parentId: '',
                    sort: 1,
                    url: '',
                    perms: '',
                    icon: '',
                    remark: ''
                },
                rules: {
                    menuName: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ]
                },
                parentMenu: []
			}
        },
        created() {
            service.get('/sys/menu/get/' + id)
            .then((res) => {
                if (res.code == '0000') {
                    this.formData.id = res.data.id;
                    this.formData.menuName = res.data.menuName;
                    this.formData.parentId = res.data.parentId;
                    this.formData.sort = res.data.sort;
                    this.formData.url = res.data.url;
                    this.formData.perms = res.data.perms;
                    this.formData.icon = res.data.icon;
                    this.formData.remark = res.data.remark;
                }
            });
            let queryParam = {"type":"1"};
            service.post('/sys/menu/list', JSON.parse(JSON.stringify(queryParam)))
            .then((res) => {
                if (res.code == '0000') {
                    this.parentMenu = res.data;
                }
            });
        },
        methods: {
            handleSubmit() {
                addOrUpdate('/sys/menu/update', this);
            }
        }
    });
</script>
</html>
